<!-- views/ColumnDetail.vue -->
<template>


    <body>
        <div class="column-header">
    <div class="nav-box">
      <div class="nav">
        <!-- 美术馆 -->
        <div class="nav-option" v-if="parentColumns.length >= 6">
          <div class="nav-option-top">
            <div class="nav-option-row" v-for="(item, index) in galleryItems" :key="index">
              <a @click.prevent="gotoColumn(item.columnId)"
                 :class="{ 'selected': isSelected(item.columnId) }">
                <div :class="['nav-option-item', `nav_column${item.columnId}`]">
                  {{ item.name }}
                </div>
              </a>
            </div>
          </div>
        </div>

        <!-- 画院 -->
        <div class="nav-option" v-if="parentColumns.length >= 12">
          <div class="nav-option-top">
            <div class="nav-option-row" v-for="(item, index) in academyItems" :key="index + 6">
              <a @click.prevent="gotoColumn(item.columnId)"
                 :class="{ 'selected': isSelected(item.columnId) }">
                <div :class="['nav-option-item', `nav_column${item.columnId}`]">
                  {{ item.name }}
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>





                <div class="translate-box">
                    <a href="javascript:translate.changeLanguage('english');">EN</a> /
                    <a href="javascript:translate.changeLanguage('chinese_simplified');">中</a>
                </div>
            </div>
            <div class="page-title-box">
                <div class="page-title">
                    <div class="title-box">
                        <div class="title">{{ columnDetail ? columnDetail.name : '' }}</div>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>

        <div >

            <div class="content">
        <div class="content-title">{{ columnDetail.name }}</div>
        <div class="content-info">时间：{{ columnDetail.createdTime }}</div>
        <div class="content-title-line"></div>
        <div v-html="columnDetail.description"></div> 
    </div>
        </div>

        <Footer></Footer>
    </body>
</template>

<script>
import { defineComponent, onMounted, computed, ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useColumnsStore } from '@/store/column';
import Footer from '../components/footer.vue';
import { getColumnDetailService, getChildrencolumnsService } from '@/api/user.js';

export default defineComponent({
    name: 'ColumnDetail',
    name: 'ColumnVue',
    components: {
        Footer,
    },
    setup() {
    const columnDetail = ref({});
    const route = useRoute();
    const router = useRouter();
    const columnsStore = useColumnsStore();
    const selectId = ref(null);

    // 获取当前文章的父专栏ID
    const currentParentId = computed(() => {
      return columnDetail.value?.parentId || null;
    });

    // 监听路由参数变化
    watch(() => route.params.id, async (newId) => {
      if (newId) {
        // 获取文章详情
        try {
          const response = await getColumnDetailService(newId);
          columnDetail.value = response.data;
          // 设置选中状态
          selectId.value = columnDetail.value.parentId;
        } catch (error) {
          console.error("Failed to fetch column detail:", error);
        }
      }
    }, { immediate: true });

    // 导航方法
    const gotoColumn = (columnId) => {
      selectId.value = columnId; // 更新选中状态
      router.push({ 
        name: 'ColumnVue', 
        params: { id: columnId }
      });
    };

    // 计算属性：判断是否选中
    const isSelected = computed(() => (itemId) => {
      return itemId === selectId.value;
    });

    return {
      columnDetail,
      selectId,
      gotoColumn,
      isSelected,
      // ... 其他返回值
      parentColumns: computed(() => columnsStore.parentColumns),
      galleryItems: computed(() => columnsStore.parentColumns.slice(0, 6)),
      academyItems: computed(() => columnsStore.parentColumns.slice(6, 12)),
    };
  }
});
</script>

<style scoped>
@import '../assets/css/columns/iconfont.css';
@import '../assets/css/columns/column-content.css';
@import '../assets/css/columns/column-content01.css';
@import '../assets/css/columns/column-header.css';
@import '../assets/css/columns/reset.css';

column-content01.css body {
    min-width: 75%;
    width: 100%;
}

.selected {
    background-color: #792323;
}

.content {
  width: 75rem;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 3.125rem;
}

.content-title {
  width: 100%;
  font-weight: bold;
  font-size: 1.75rem;
  color: #2D2D2D;
  line-height: 1.875rem;
  text-align: center;
  margin-bottom: 1.5625rem;
}

.content-info {
  width: 100%;
  font-weight: 400;
  font-size: 0.875rem;
  color: #979797;
  line-height: 1.875rem;
  text-align: center;
  margin-bottom: 1.5625rem;
}

.content-title-line {
  width: 75rem;
  height: 0.0625rem;
  background: #D5D5D5;
}

.content>.news-item-p {
  width: 100%;
  font-weight: 400;
  font-size: 1rem;
  color: #2D2D2D;
  line-height: 1.875rem;
  margin-bottom: 3.1875rem;
  text-indent: 2em;
}

.content>.news-item-img {
  width: 62.25rem;
  height: 36.5rem;
  margin-bottom: 2.4375rem;
}

.content>.news-item-video {
  width: 62.27rem;
  height: 36.53rem;
  margin: 1.69rem auto;
}
</style>